<template>
	<view class="mySpace">
		<u-navbar title="我的空间" title-size="36" title-color="#333333" back-icon-size="40"></u-navbar>
		
		<scroll-view class="space-list" v-if="dataShow" :scroll-top="scrollTop" lower-threshold="80" scroll-y="true" @scrolltolower="scrollToLower">
			<space v-for="(item, i) in spaceList" :key="i" :spaceDetail="item" @onClick="onSpaceDetail(item)"></space>
		</scroll-view>
		<view class="empty-section" v-else>
			<empty type="space" :showButton="false"></empty>
		</view>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	import space from '../../components/space.vue'
	export default {
		components: {
			empty,
			space
		},
		data() {
			return {
				pageInfo: {
					currentPage: 1,
					totalPage: 0,
					pageSize: 10 // 每页数据的数量
				},
				dataShow: true,
				
				spaceList: [],
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			scrollToLower() {
				let pageInfo = this.pageInfo
				if(pageInfo.currentPage < pageInfo.totalPage) {
					pageInfo.currentPage = pageInfo.currentPage + 1
					this.loadData()
				}
			},
			onSpaceDetail(item) {
				this.$u.route('/pages/mySpace/spaceDetail', {
					id: item.id
				})
			},
			getData() {
				uni.showLoading()
				this.$u.get('/paopao/mini/space/queryMySpace', this.pageInfo).then(res => {
					uni.hideLoading()
					if(res && res.message == -1) { return }
					this.spaceList.push(...res.items)
					this.pageInfo.pageSize = res.pageSize
					if(this.spaceList.length <= 0) {
						this.dataShow = false
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import url("../../common/css/var.less");
.mySpace {
	background-color: #FFFFFF;
}
.empty-section {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100vh - 44px - var(--status-bar-height));
}
.space-list {
	padding-top: 32rpx;
	space {
		margin-bottom: 32rpx;
		display: block;
	}
}
</style>
